<template>
  <page-dialog
    :title="dialogInfo.title"
    v-model:visible="showDialog"
    :width="dialogInfo.width"
    :bt-list="dialogInfo.btList"
  >
    <div class="model-panel">
      <div class="model-panel-body">
        <el-tabs v-model="activeName" @tab-click="handleClick">
          <el-tab-pane label="表格显示设置" name="showLevel">
            <el-row class="set-preference-wrap">
              <el-col :span="6">
                <el-button
                  style="marginbottom: 5px; marginleft: 5px"
                  :disabled="!fieldList1.length"
                  @click="rightMove('showLevel')"
                  >一键右移</el-button
                >
                <div class="set-preference-item margin-right">
                  <div class="draggable-wrap-item background-color">未选</div>
                  <draggable
                    class="draggable-wrap"
                    :list="fieldList1"
                    dragable="true"
                    element="ul"
                    group="fieldSite"
                    @add="fieldAddshow1"
                    :options="{
                      scroll: true,
                      animation: 300,
                    }"
                  >
                  <template #item="{ element, index }">
                    <div
                      class="draggable-wrap-item"
                      :key="Math.random() + index"
                    >
                      {{ element.label }}
                    </div>
                  </template>
                  </draggable>
                </div>
              </el-col>
              <el-col :span="17">
                <el-button
                  style="marginbottom: 5px; marginleft: 5px"
                  :disabled="!fieldList2.length"
                  @click="leftMove('showLevel')"
                  >一键左移</el-button
                >
                <div class="set-preference-item">
                  <div class="draggable-wrap-item background-color">
                    <span>已选</span>
                    <span style="marginright: 100px">操作</span>
                  </div>
                  <draggable
                    class="draggable-wrap"
                    :list="fieldList2"
                    dragable="true"
                    group="fieldSite"
                    @add="fieldAddshow2"
                    @update="datadragFieldEnd2"
                    :options="{
                      scroll: true,
                      animation: 300,
                    }"
                  >
                  <template #item="{ element, index }">
                    <div
                      class="draggable-wrap-item"
                      :key="Math.random() + index"
                    >
                      <span> {{ element.label }}</span>
                      <span
                        style="marginright: 100px"
                        class="slip-edit"
                        @click="setTop(element, fieldList2, 'showLevel')"
                      >
                        {{ index ? "置顶" : "" }}
                      </span>
                    </div>
                  </template>
                  </draggable>
                </div>
              </el-col>
            </el-row>
          </el-tab-pane>
          <el-tab-pane
            label="表格分组设置"
            v-if="groupLevelShow"
            name="groupLevel"
          >
            <el-row class="set-preference-wrap">
              <el-col :span="6">
                <el-button
                  style="marginbottom: 5px; marginleft: 5px"
                  :disabled="!fieldList1.length"
                  @click="rightMove('groupLevel')"
                  >一键右移</el-button
                >
                <div class="set-preference-item margin-right">
                  <div class="draggable-wrap-item background-color">未选</div>
                  <draggable
                    class="draggable-wrap"
                    v-model="fieldList1"
                    dragable="true"
                    group="fieldSite"
                    @add="fieldAddGroup1"
                    :options="{
                      scroll: true,
                      animation: 300,
                    }"
                  >
                    <template #item="{ element, index }">
                      <div
                        class="draggable-wrap-item"
                        :key="Math.random() + index"
                      >
                        {{ element.label }}
                      </div>
                    </template>
                  </draggable>
                </div>
              </el-col>
              <el-col :span="17">
                <el-button
                  style="marginbottom: 5px; marginleft: 5px"
                  :disabled="!fieldList2.length"
                  @click="leftMove('groupLevel')"
                  >一键左移</el-button
                >
                <div class="set-preference-item">
                  <div class="draggable-wrap-item background-color">
                    <span>已选</span>
                    <span style="marginright: 100px">操作</span>
                  </div>
                  <draggable
                    class="draggable-wrap"
                    v-model="fieldList2"
                    dragable="true"
                    group="fieldSite"
                    @add="fieldAddGroup2"
                    @update="datadragFieldEnd3"
                    :options="{
                      scroll: true,
                      animation: 300,
                    }"
                  >
                  <template #item="{ element, index }">
                      <span> {{ element.label }}</span>
                      <span
                        style="marginright: 100px"
                        class="slip-edit"
                        @click="setTop(element, fieldList2, 'groupLevel')"
                      >
                        {{ index ? '置顶' : '' }}
                      </span>
                    </template>
                  </draggable>
                </div>
              </el-col>
            </el-row>
          </el-tab-pane>
          <el-tab-pane name="sortLevel">
            <div slot="label" style="display: flex">
              <span class="margin-right">表格排序设置</span>
            </div>
            <el-row class="set-preference-wrap">
              <el-col :span="6">
                <el-button
                  style="marginbottom: 5px; marginleft: 5px"
                  :disabled="!fieldList1.length"
                  @click="rightMove('sortLevel')"
                  >一键右移</el-button
                >
                <div class="set-preference-item margin-right">
                  <div class="draggable-wrap-item background-color">未选</div>
                  <draggable
                    class="draggable-wrap"
                    v-model="fieldList1"
                    dragable="true"
                    group="fieldSite"
                    @add="fieldAddSort1"
                    :options="{
                      scroll: true,
                      animation: 300,
                    }"
                  >
                  <template #item="{ element, index }">
                      <div
                        class="draggable-wrap-item"
                        :key="Math.random() + index"
                      >
                        {{ element.label }}
                      </div>
                    </template>
                  </draggable>
                </div>
              </el-col>
              <el-col :span="17">
                <el-button
                  style="marginbottom: 5px; marginleft: 5px"
                  :disabled="!fieldList2.length"
                  @click="leftMove('sortLevel')"
                  >一键左移</el-button
                >
                <div class="set-preference-item">
                  <div class="draggable-wrap-item background-color">
                    <span>已选</span>
                    <span style="marginright: 100px">操作</span>
                  </div>
                  <draggable
                    class="draggable-wrap"
                    v-model="fieldList2"
                    dragable="true"
                    group="fieldSite"
                    @add="fieldAddSort2"
                    @update="datadragFieldEnd4"
                    :options="{
                      scroll: true,
                      animation: 300,
                    }"
                  >
                  <template #item="{ element, index }">
                      <div
                        class="draggable-wrap-item"
                        :key="Math.random() + index"
                      >
                        <span>{{ element.label }}</span>
                        <span
                          style="marginright: 100px"
                          class="slip-edit"
                          @click="changeSort(element.sortControllerType, index)"
                        >
                          {{
                            element.sortControllerType === 1
                              ? '升序'
                              : element.sortControllerType === 2
                              ? '降序'
                              : ''
                          }}
                        </span>
                      </div>
                    </template>
                  </draggable>
                </div>
              </el-col>
            </el-row>
          </el-tab-pane>
        </el-tabs>
      </div>
    </div>
  </page-dialog>
</template>
<script setup name="ConsumeSetPreference">
import draggable from "vuedraggable";

const { proxy } = getCurrentInstance();
const emit = defineEmits();
const props = defineProps({
  visible: {
    type: Boolean,
  },
  searchList: {
    type: Array,
    default: function () {
      return [];
    },
  },
  fieldList: {
    type: Array,
    default: function () {
      return [];
    },
  },
  customizeUserVO: {
    type: Object,
    default: function () {
      return {};
    },
  },
  groupLevelShow: {
    type: Boolean,
    default: false,
  },
});

const dialogInfo = reactive({
  title: "偏好设置",
  width: "800px",
  btLoading: false,
  btList: [
    { label: "关闭", event: handleClose, show: true },
    {
      label: "保存",
      type: "primary",
      disabled: false,
      event: save,
      show: true,
    },
  ],
});
const searchList1 = ref([]);
const searchList2 = ref([]);
const fieldList1 = ref([]);
const fieldList2 = ref([]);
const newFieldList = ref([]);
const newCustomizeUserVO = ref({});
const activeName = ref("showLevel");

const showDialog = computed({
  get() {
    return props.visible;
  },
  set(newValue) {
    emit("update:visible", newValue); // 更新父组件shows
  },
});

newCustomizeUserVO.value = JSON.parse(JSON.stringify(props.customizeUserVO));
newFieldList.value = proxy.$fn.deepClone(props.fieldList);
if (newFieldList.value.length) {
  fieldList1.value = newFieldList.value.filter((item) => item.showLevel === 0);
  newFieldList.value.sort(compare("showLevel"));
  fieldList2.value = newFieldList.value.filter((item) => item.showLevel > 0);
}

function setTop(row, arr, str) {
  //置顶
  arr = arr.filter((item) => item !== row);
  switch (str) {
    case "queryLevel":
      arr.unshift(row);
      arr.forEach((item, index) => {
        item.searchLevel = index + 1;
      });
      searchList2.value = arr;
      break;
    case "showLevel":
      arr.unshift(row);
      arr.forEach((item, index) => {
        item.showLevel = index + 1;
      });
      fieldList2.value = arr;
      break;
    case "groupLevel":
      arr.unshift(row);
      arr.forEach((item, index) => {
        item.groupLevel = index + 1;
      });
      fieldList2.value = arr;
      break;
  }
}
function rightMove(str) {
  //右移
  switch (str) {
    case "queryLevel":
      searchList2.value = searchList2.value.concat(searchList1.value);
      searchList2.value.forEach((item, index) => {
        item.show = true;
        item.searchLevel = index + 1;
      });
      searchList1.value = [];
      break;
    case "showLevel":
      fieldList2.value = fieldList2.value.concat(fieldList1.value);
      fieldList2.value.forEach((item, index) => {
        item.hidden = false;
        item.showLevel = index + 1;
      });
      fieldList1.value = [];
      break;
    case "groupLevel":
      fieldList2.value = fieldList2.value.concat(fieldList1.value);
      fieldList2.value.forEach((item, index) => {
        item.groupLevel = index + 1;
      });
      fieldList1.value = [];
      break;
    case "sortLevel":
      fieldList2.value = fieldList2.value.concat(fieldList1.value);
      fieldList2.value.forEach((item, index) => {
        item.sortable = true;
        item.sortControllerType = 1;
        item.sortLevel = index + 1;
      });
      fieldList1.value = [];
      break;
  }
}
function leftMove(str) {
  //左移
  switch (str) {
    case "queryLevel":
      searchList1.value = searchList1.value.concat(searchList2.value);
      searchList1.value.forEach((item) => {
        item.show = false;
        item.searchLevel = 0;
      });
      searchList2.value = [];
      break;
    case "showLevel":
      fieldList1.value = fieldList1.value.concat(fieldList2.value);
      fieldList1.value.forEach((item) => {
        item.hidden = true;
        item.showLevel = 0;
      });
      fieldList2.value = [];
      break;
    case "groupLevel":
      fieldList1.value = fieldList1.value.concat(fieldList2.value);
      fieldList1.value.forEach((item) => {
        item.groupLevel = 0;
      });
      fieldList2.value = [];
      break;
    case "sortLevel":
      fieldList1.value = fieldList1.value.concat(fieldList2.value);
      fieldList1.value.forEach((item) => {
        item.sortable = false;
        item.sortControllerType = 0;
        item.sortLevel = 0;
      });
      fieldList2.value = [];
      break;
  }
}
function handleClose() {
  showDialog.value = false;
}
function save() {
  let customizeUserVO = newCustomizeUserVO.value;
  let searchList = searchList2.value.concat(searchList1.value);
  let fieldList = newFieldList.value;
  searchList.forEach((item) => {
    if (Object.keys(customizeUserVO.detail).includes(item.value)) {
      customizeUserVO.detail[item.value].searchLevel = item.searchLevel;
    }
  });
  fieldList.forEach((item) => {
    if (Object.keys(customizeUserVO.detail).includes(item.value)) {
      customizeUserVO.detail[item.value].showLevel = item.showLevel;
      customizeUserVO.detail[item.value].sortControllerType =
        item.sortControllerType;
      customizeUserVO.detail[item.value].sortLevel = item.sortLevel;
    }
  });
  emit("callback", {
    searchList: searchList,
    fieldList: fieldList,
    customizeUserVO: customizeUserVO,
  });
  handleClose();
}
function compare(property) {
  return function (a, b) {
    return a[property] - b[property];
  };
}
function handleClick() {
  let fieldList = newFieldList.value;
  if (activeName.value === "showLevel") {
    fieldList1.value = fieldList.filter((item) => item.showLevel === 0);
    fieldList.sort(compare("showLevel"));
    fieldList2.value = fieldList.filter((item) => item.showLevel > 0);
  } else if (activeName.value === "sortLevel") {
    fieldList.sort(compare("showLevel"));
    fieldList1.value = fieldList.filter(
      (item) => item.sortControllerType === 0 && item.showLevel > 0
    );
    fieldList2.value = fieldList.filter(
      (item) => item.sortControllerType > 0 && item.showLevel > 0
    );
  } else if (activeName.value === "groupLevel") {
    fieldList1.value = fieldList.filter(
      (item) => item.groupLevel === 0 && item.showLevel > 0
    );
    fieldList2.value = fieldList.filter(
      (item) => item.groupLevel > 0 && item.showLevel > 0
    );
  }
}
function changeSort(num, index) {
  if (num === 1) {
    fieldList2.value[index].sortControllerType = 2;
  } else if (num === 2) {
    fieldList2.value[index].sortControllerType = 1;
  }
}
//查询
function add1(e) {
  searchList1.value.forEach((item) => {
    item.show = false;
    item.searchLevel = 0;
  });
}
function add2(e) {
  searchList2.value.forEach((item, index) => {
    item.show = true;
    item.searchLevel = index + 1;
  });
}
function datadragSearchEnd2() {
  searchList2.value.forEach((item, index) => {
    item.searchLevel = index + 1;
  });
}
//显示
function fieldAddshow1() {
  fieldList1.value.forEach((item) => {
    item.hidden = true;
    item.showLevel = 0;
  });
}
function fieldAddshow2() {
  fieldList2.value.forEach((item, index) => {
    item.hidden = false;
    item.showLevel = index + 1;
  });
}
function datadragFieldEnd2() {
  fieldList2.value.forEach((item, index) => {
    item.showLevel = index + 1;
  });
}
//分组
function fieldAddGroup1() {
  fieldList1.value.forEach((item) => {
    item.groupLevel = 0;
  });
}
function fieldAddGroup2() {
  fieldList2.value.forEach((item, index) => {
    item.groupLevel = index + 1;
  });
}
function datadragFieldEnd3() {
  fieldList2.value.forEach((item, index) => {
    item.groupLevel = index + 1;
  });
}
//排序
function fieldAddSort1(e) {
  fieldList1.value.forEach((item) => {
    item.sortable = false;
    item.sortControllerType = 0;
    item.sortLevel = 0;
  });
}
function fieldAddSort2(e) {
  let newIndex = e.newIndex;
  fieldList2.value.forEach((item, index) => {
    item.sortable = true;
    item.sortControllerType = newIndex === index ? 1 : item.sortControllerType;
    item.sortLevel = index + 1;
  });
}
function datadragFieldEnd4(e) {
  fieldList2.value.forEach((item, index) => {
    item.sortLevel = index + 1;
  });
}
function choose1(evt) {
  // const ITEM_HEIGHT = 153;
  const ITEM_HEIGHT = evt.item.offsetHeight;
  let container = evt.path[1];
  let index = evt.oldIndex;

  if (index * ITEM_HEIGHT < container.scrollTop) {
    container.scrollTo({
      top: index * ITEM_HEIGHT,
    });
  } else if (
    (index + 1) * ITEM_HEIGHT >
    container.scrollTop + container.offsetHeight
  ) {
    container.scrollTo({
      top: (index + 1) * ITEM_HEIGHT - container.offsetHeight,
    });
  }
}
function choose2(evt) {
  // const ITEM_HEIGHT = 153;
  const ITEM_HEIGHT = evt.item.offsetHeight;
  let container = evt.path[1];
  let index = evt.oldIndex;

  if (index * ITEM_HEIGHT < container.scrollTop) {
    container.scrollTo({
      top: index * ITEM_HEIGHT,
    });
  } else if (
    (index + 1) * ITEM_HEIGHT >
    container.scrollTop + container.offsetHeight
  ) {
    container.scrollTo({
      top: (index + 1) * ITEM_HEIGHT - container.offsetHeight,
    });
  }
}
</script>
<style scoped lang="scss">
.set-preference-wrap {
  padding: 5px 0;
  box-sizing: border-box;
  .set-preference-item {
    border: 1px solid #dae2ea;
    height: 300px;
    overflow: hidden;
    overflow-y: scroll;
  }
}
.draggable-wrap {
  height: 100%;
  .draggable-wrap-group {
    height: 100%;
    width: 100%;
    display: inline-block;
  }
}
.draggable-wrap-item {
  height: 30px;
  width: 100%;
  cursor: pointer;
  display: flex;
  justify-content: space-between;
  align-items: center;
  border-top: 1px solid #dae2ea;
  padding: 0 5px;
  box-sizing: border-box;
  color: #606266;
  font-size: 14px;
}
.background-color {
  background: #dfdfdf;
  border-top: 0;
  color: #909399;
  font-weight: 600;
}
.margin-right {
  margin-right: 10px;
}
</style>
